
<template>
  <div class="effet-model-bg" v-if="show">
    <div class="effet-model">
      <div class="effet-model-title">
        <span>{{ title }}影像报告</span>
        <span class="el-icon-circle-close close" @click="closeModel"></span>
      </div>
      <div class="effet-content">
        <div class="effet-col-1">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="1">
              <el-form label-width="100px">
                <el-form-item label="检查号：">
                  <div class="form-item-text">{{ reportDetail.checkno }}</div>
                </el-form-item>
                <el-form-item label="姓名：">
                  <div class="form-item-text">{{ reportDetail.name }}</div>
                </el-form-item>
                <el-form-item label="性别：">
                  <div class="form-item-text">{{ reportDetail.sex }}</div>
                </el-form-item>
                <el-form-item label="年龄：">
                  <div class="form-item-text">{{ reportDetail.age }}</div>
                </el-form-item>
                <el-form-item label="检查部位：">
                  <div class="form-item-text">
                    {{ reportDetail.inspectionarea }}
                  </div>
                </el-form-item>
                <el-form-item label="检查类型：">
                  <div class="form-item-text">
                    {{ reportDetail.modality }}
                  </div>
                </el-form-item>
                <el-form-item label="床号：">
                  <div class="form-item-text">{{ reportDetail.bedNo }}</div>
                </el-form-item>
                <el-form-item label="检查日期：">
                  <div class="form-item-text">
                        <!-- {{ reportDetail.checkDate | formDate }} -->
                    {{ reportDetail.checkDate }}
                  </div>
                </el-form-item>
                <el-form-item label="科室：">
                  <div class="form-item-text">
                    {{ reportDetail.applyDepartmentName }}
                  </div>
                </el-form-item>
                <el-form-item label="送检医生：">
                  <div class="form-item-text">
                    {{ reportDetail.sendDoctor }}
                  </div>
                </el-form-item>
                <el-form-item label="临床诊断：">
                  <div class="form-item-text">
                    {{ reportDetail.diagnoseopinion }}
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <!-- <el-tab-pane label="影像列表" name="2">影像列表</el-tab-pane>
            <el-tab-pane label="历史记录" name="3">历史记录</el-tab-pane> -->
          </el-tabs>
        </div>
        <div class="effet-col-2">
          <div class="reportWrite-header">
            <span>当前医生：{{ username.realname }}</span>
            <span>当前时间：{{ currentTime }}</span>
          </div>
          <div class="reportWrite-header">
            <div>
              <el-button type="danger" icon="el-icon-lock" v-if="reportDetail.islock == 1"></el-button>
              <!-- 已为您锁定当前报告 -->
              <span v-if="reportDetail.islock == 1">{{reportDetail.locktext}}</span>
              <span v-else>当前报告暂未锁定</span>
            </div>
            <div>
              <!-- <el-checkbox v-model="checked">是否双屏</el-checkbox> -->
              <!-- <el-button type="primary" @click="reportWriteEvent.imageFinding()">患者影像</el-button> -->
              <!-- 本人才能解锁 -->
              <el-button type="primary" v-if="reportDetail.islock == 1 && reportDetail.lockcan==1"   @click="lockreport(0)">解除锁定</el-button>
            </div>
          </div>
          <div class="reportWrite-detail">
            <div class="reportWrite-title">检查报告单</div>
            <div>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="reportWrite-purple">
                    <span>检查号：</span>
                    <span>{{ reportDetail.checkno }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="reportWrite-purple">
                    <span>姓名：</span>
                    <span>{{ reportDetail.name }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="reportWrite-purple">
                    <span>性别：</span>
                    <span>{{ reportDetail.sex }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="reportWrite-purple">
                    <span>年龄：</span>
                    <span>{{ reportDetail.age }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="reportWrite-purple">
                    <span>检查部位：</span>
                    <span>{{ reportDetail.inspectionarea }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="reportWrite-purple">
                    <span>检查类型：</span>
                    <span>{{ reportDetail.modality }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="reportWrite-purple">
                    <span>床号：</span>
                    <span>{{ reportDetail.bedNo }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="reportWrite-purple">
                    <span>检查日期：</span>
                    <!--reportDetail.reporttime | formDate    -->
                    <span>{{ reportDetail.checkDate}}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="reportWrite-purple">
                    <span>科室：</span>
                    <span>{{ reportDetail.applyDepartmentName }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="reportWrite-purple">
                    <span>送检医生：</span>
                    <span>{{ reportDetail.sendDoctor }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="reportWrite-purple">
                    <span>临床诊断：</span>
                    <span>{{ reportDetail.diagnoseopinion }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div style="margin-top: 20px">
            <el-form label-width="100px">
              <el-form-item label="影像所见"> 

  <!-- <span v-if="reportDetail.islock == 1">{{reportDetail.locktext}}</span>
              <span v-else>当前报告暂未锁定</span> -->
 <!-- @blur="lockreport(1)"        -->
                <el-input v-if="reportDetail.lockcan == 1"
                  type="textarea"
                  v-model="imageFinding"
                  placeholder="影像所见"
                  :rows="8"
                  show-word-limit                   
                  @click.native="lockreport(1)"              
                ></el-input>

                 <el-input v-else
                  type="textarea"
                  v-model="imageFinding"
                  placeholder="影像所见"
                  :rows="8"
                  show-word-limit  
                  disabled
                ></el-input>

              </el-form-item>
 

              <el-form-item label="诊断意见">
                <!-- <el-input
                  type="textarea"
                  v-model="diagnoseOpinion"
                  placeholder="诊断意见"
                  :rows="6"
                  
                  show-word-limit
                ></el-input> -->

                  <el-input v-if="reportDetail.lockcan == 1"
                  type="textarea"
                  v-model="diagnoseOpinion"
                  placeholder="诊断意见"
                  :rows="6"
                  show-word-limit 
                  @click.native="lockreport(1)"                  
                ></el-input>

                 <el-input v-else
                  type="textarea"
                  v-model="diagnoseOpinion"
                  placeholder="影像所见"
                  :rows="8"
                  show-word-limit  
                  disabled
                ></el-input>


              </el-form-item>
            </el-form>
          </div>
          <div class="list-footer">
                <el-button type="primary" @click="jump(0,'')">返回</el-button>
                <el-button type="primary" @click="jump(1,'')">预览</el-button>
                <span v-for="(item,index) in reportDetail.buttons" :key="index" style="margin-left:10px;">
                    <el-button type="primary" @click="jump(2,item)" v-if="item == '保存'">保存</el-button>
                    <el-button type="primary" @click="jump(3,item)" v-if="item == '提交'">提交</el-button>
                    <el-button type="primary" @click="jump(4,item)" v-if="item == '审核'">审核</el-button>
                    <!-- 功能重复，找方法挺难 统一到列表 -->
                    <!-- <el-button type="primary" @click="jump(5,item)" v-if="item == '召回'">召回</el-button> -->
                </span>
            </div>
        </div>
        <div class="effet-col-1">
          <div style="height: 300px" class="scrollbar">
            <report-tree :show-file="true" :callback="treeBack" />
          </div>
          <div>
            <el-form
              label-width="100px"
            >
              <el-form-item label="模板名称" >
                <el-input
                  v-model.trim="treeInfo.templateName"
                  placeholder="请输入模板名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="部位">
                <el-select v-model="treeInfo.bodyPartId" placeholder="请选择">
                  <el-option
                    v-for="item in bodyPartDOList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="检查类型">
                <el-select v-model="treeInfo.checkType" placeholder="请选择">
                  <el-option
                    v-for="item in checktypelist"
                    :key="item.name"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="影像所见">
                <el-input
                  type="textarea"
                  v-model.trim="treeInfo.imageFinding"
                  placeholder="检查描述"
                  :rows="5"
                  maxlength="500"
                  show-word-limit
                ></el-input>
              </el-form-item>
              <el-form-item label="诊断意见">
                <el-input
                  type="textarea"
                  v-model.trim="treeInfo.diagnoseOpinion"
                  placeholder="诊断意见"
                  :rows="5"
                  maxlength="500"
                  show-word-limit
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="report-footer">
                <el-button type="primary"  @click="addReportMethod(1)">覆盖</el-button>
                <el-button type="primary"  @click="addReportMethod(2)">追加</el-button>
                <!-- 先不放开 -->
                <!-- <el-button type="primary"  @click="addReportMethod(3)">更新个人模板</el-button> -->
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Toast} from 'vant';
import reportTree from "@/view/common/reportTree";
import moment from "moment";
import { getdate1 } from "@/utils/utils";
export default {
  components: { reportTree },
  props: {
    id: {
      type: [String,Number],
      default: "1",
    },
    title: {
      type: String,
      default: "用户",
    },
    show: {
      type: Boolean,
      default: false,
    },
    reportWriteEvent:{
      type:[Function,Object]
    }
  },
  computed: {
    username() {
      let userInfo = localStorage.getItem("userInfo");
      return userInfo ? JSON.parse(userInfo) : { realname: this.name };
    },
  },
  data() {
    return {
      checked: true,
      activeName: "1",
      reportDetail: {},
      currentTime: moment().format("YYYY-MM-DD hh:mm:ss"),
      filterText: "",
      treeInfo:{
        templateName:'',
        bodyPartId:'',
        imageFinding:'',
        diagnoseOpinion:'',
        checkType:''
      },
      bodyPartDOList:[],
      checktypelist:[],
      imageFinding:'',
      diagnoseOpinion:''
    };
  },
  filters: {
      formDate: (val) =>getdate1(val)
  },
  watch: {
    show: function (val) {
      if (val) {
        this.getDetail()
        this.getType()
      }
    },
  },
  created() {

  },
  methods: {
    closeModel() {
      this.$emit("update:show", false);
    },
    getDetail() {
            const loading = this.$loading({ text: '加载中' });
            this.$http.post(this.$API.CLOUDDIAGNOSIS_DETAIL, {id:this.id})
                .then((res) => {
                    loading.close();
                    console.log('登录信息', res)
                    if (res.code == 1) {
                        this.reportDetail=res.data;
                        this.imageFinding = res.data.imageFinding; 
                        this.diagnoseOpinion = res.data.diagnoseOpinion;
                    }
                })
        },


   getType() {
      this.$http.get(this.$API.SELFTEMP_TYPE).then((res) =>{
        if(res.code == 1){
          this.bodyPartDOList =res.data && Array.isArray(res.data.bodyPartDOList)? res.data.bodyPartDOList: [];
          this.checktypelist =res.data && Array.isArray(res.data.checktypelist)? res.data.checktypelist: [];
        }
      });
    },
    treeBack(e) {
      console.log(e);
      if (e) {
        this.treeInfo = e;
      }
    },
    addReportMethod(flag) {
      if (flag == 1) {
        this.imageFinding = this.treeInfo.imageFinding; 
        this.diagnoseOpinion = this.treeInfo.diagnoseOpinion;
      } else if(flag == 2){
        if(this.reportDetail.imageFinding){
          this.imageFinding =
          this.reportDetail.imageFinding + this.treeInfo.imageFinding;
        }else{
          this.imageFinding = this.treeInfo.imageFinding;
        }

        if(this.reportDetail.diagnoseOpinion){
          this.diagnoseOpinion =
          this.reportDetail.diagnoseOpinion + this.treeInfo.diagnoseOpinion;
        }else{
          this.diagnoseOpinion = this.treeInfo.diagnoseOpinion;
        }

        // this.imageFinding =
        //   this.reportDetail.imageFinding + this.treeInfo.imageFinding;
        // this.diagnoseOpinion =
        //   this.reportDetail.diagnoseOpinion + this.treeInfo.diagnoseOpinion;
      }else if(flag == 3){
        const loading = this.$loading({ text: '提交中' });
        this.$http.post(this.$API.SELFTEMP_ADD, {
          bodyPartId: this.treeInfo.bodyPartId,
          bodyPartStr: this.treeInfo.bodyPartStr,
          templateName: this.treeInfo.templateName,
          checkType: this.treeInfo.checkType,
          imageFinding: this.treeInfo.imageFinding,
          diagnoseOpinion: this.treeInfo.diagnoseOpinion,
        }).then((res) => {
                loading.close();
                console.log('登录信息', res)
                if (res.code == 1) {
                    this.$message.success('操作成功');
                    this.getDetail()
                }else{
                    this.$message.fail(res.msg);
                }
            })
      }
      this.$forceUpdate();
    },
    jump(flag,item) {
      if(flag == 0){
        this.closeModel();
      }else if(flag == 1){
        this.reportWriteEvent.pdfView()
      }else{
          this.reportDetail.zid=this.id;
          this.reportDetail.buttons=item;
          this.reportDetail.imageFinding=this.imageFinding;
          this.reportDetail.diagnoseOpinion=this.diagnoseOpinion;
          const loading = this.$loading({ text: '提交中' });
          this.$http.post(this.$API.CLOUDDIAGNOSIS_WRITEREPORT, this.reportDetail)
              .then((res) => {
                  loading.close();
                  console.log('登录信息', res)
                  if (res.code == 1) {
                    Toast.success('操作成功');
                      // this.$message.success('操作成功');
                      this.getDetail()
                  }else{
                    // this.$loading({ text: res.msg });
                      // this.fail(res.msg);
                       Toast.fail(res.msg);
                  }
              })
        }
    },

    // 
    lockreport(flag){
      console.log(22);
      // lockuid
        // 取消锁定
       if(this.reportDetail.islock ==1 && flag==0){
            const loading = this.$loading({ text: '处理中' });
            let hoscode=this.reportDetail.hospitalid;
            let checkno=this.reportDetail.checkno;
            this.$http.post(this.$API.CLOUDDIAGNOSIS_lockreport, {zid:this.id,todo:flag,hoscode:hoscode,checkno:checkno})
                .then((res) => {
                    loading.close();
                    console.log('登录信息', res)
                    if (res.code == 1) {
                       this.reportDetail.islock=0;
                      // if(flag){                        
                      //   this.reportDetail.islock=1;
                      // }else{
                      //    this.reportDetail.islock=0;
                      // } 
                    }
          })
       }else{

        // 只点击一次
        if(this.reportDetail.islock==0){
          const loading = this.$loading({ text: '处理中' });
            let hoscode=this.reportDetail.hospitalid;
            let checkno=this.reportDetail.checkno;
            this.$http.post(this.$API.CLOUDDIAGNOSIS_lockreport, {zid:this.id,todo:flag,hoscode:hoscode,checkno:checkno})
                .then((res) => {
                    loading.close();
                    console.log('登录信息', res)
                    if (res.code == 1) {
                      //  this.reportDetail.islock=0;
                       this.reportDetail.islock=1;
                       this.reportDetail.locktext="已为您锁定当前报告"; 
                      // if(flag){                        
                      //   this.reportDetail.islock=1;
                      // }else{
                      //    this.reportDetail.islock=0;
                      // } 
                    }
          })


        }

       }
   


      // console.log(22);
    }
  },
};
</script>

<style scoped>
.effet-model-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}
.effet-model {
  width: 98%;
  height: 95%;
  padding: 30px 20px 20px 20px;
  background: #eee;
  border-radius: 8px;
  box-shadow: 1px 1px 4px -2px #000;
  position: relative;
}
.effet-model-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 14px;
  color: #333;
}
.close {
  font-size: 28px;
  font-weight: bold;
}
.close:hover {
  cursor: pointer;
  color: blue;
}
.effet-content {
  display: flex;
}
.effet-col-1 {
  width: 300px;
  padding: 10px;
}
.effet-col-2 {
  flex: 1;
  padding: 10px;
  border-left: 1px solid #888;
  border-right: 1px solid #888;
}
.reportWrite-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: #888;
  background-color: #fff;
  margin-top: 10px;
  padding: 10px;
}
.reportWrite-purple {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  text-align: center;
}
.reportWrite-purple:nth-child(1) {
  color: #888;
}
.reportWrite-purple:nth-child(2) {
  color: #333;
}
.reportWrite-detail {
  padding: 10px 0;
  background-color: #fff;
  margin-top: 10px;
  border-bottom: 1px solid #888;
}
.reportWrite-title {
  font-size: 20px;
  text-align: center;
  padding: 10px;
  font-weight: bold;
}
.list-footer{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding:10px;
}
.report-footer{
  display: flex;
  align-items: center;
  padding:10px;
}
</style>
